import { BaseListPage, IBaseListPageProps, columnRenders, UdModal, UdModalForm, validators } from '../../../index'
import { withRouter } from 'react-router'
import { Select, Input, Button, Alert } from 'antd'
import React from 'react'
import TextArea from 'antd/lib/input/TextArea'

class Demo extends BaseListPage {

  constructor(props: IBaseListPageProps) {
    super(props)
    this.saveParamsWithUrl = false // 因为文档页面存在多个 列表页，为了避免冲突除了第一个参数保持在url地址外，其他的均不保持在url地址上。
    this.state = {
      title: '支付单查询',
      queryApi: 'http://10.1.100.78:8011/',
      conditions: [
        { id: 'platformPayNo', label: '平台支付单号' },
        { id: 'merchantPayNo', label: '商户支付单号' },
        { id: 'thirdPayNo', label: '第三方支付单号' },
        {
          label: '状态', id: 'payStatus',
          render: <Select>
            <Select.Option value="success">成功</Select.Option>
            <Select.Option value="failure">失败</Select.Option>
            <Select.Option value="closed">超时关闭</Select.Option>
            <Select.Option value="paying">支付中</Select.Option>
            <Select.Option value="unpaid">待支付</Select.Option>
          </Select>
        },
        { id: 'requestSource', label: '来源' },
        { id: 'channelTypeLabel', label: '支付方式' },
        { id: 'channelThirdLabel', label: '支付渠道' },
      ],
      rowKey: 'id',
      columns: [
        { title: '平台支付单号', dataIndex: 'platformPayNo', minWidth: '150px', },
        { title: '商户支付单号', dataIndex: 'merchantPayNo', minWidth: '150px', },
        { title: '第三方支付单号', dataIndex: 'thirdPayNo', minWidth: '150px', },
        {
          title: '支付金额', dataIndex: 'totalAmount', minWidth: '100px',
          render: (text: any, record: any, index: number) => <div>{(text / 100).toFixed(2)}</div>
        },
        { title: '状态', dataIndex: 'payStatusLabel', minWidth: '80px' },
        {
          title: '来源', dataIndex: 'requestSource', minWidth: '80px',
          render: (text: any, record: any, index: number) => <div>{text}</div>
        },
        { title: '支付方式', dataIndex: 'channelTypeLabel', minWidth: '80px' },
        { title: '支付渠道', dataIndex: 'channelThirdLabel', minWidth: '100px' },
        { title: '订单创建时间', dataIndex: 'createTime', minWidth: '110px' },
        {
          title: '支付成功时间', dataIndex: 'finishTime', minWidth: '110px',
        },
        {
          title: '操作', dataIndex: 'operate', fixedWidth: '180px',
          render: columnRenders.operate([
            { title: '操作按钮1', action: (text, model, index) => { } },
            { title: '操作按钮2', action: (text, model, index) => { } },
            { title: '操作按钮3', action: (text, model, index) => { } },
            { title: '操作按钮4', action: (text, model, index) => { } },
            { title: '操作按钮5', action: (text, model, index) => { } },
          ])
        }
      ],
      leftBtns: [
        () => <Button disabled={this.state.selectedRows.length == 0} onClick={this.export}>导出选中数据</Button>
      ],
      rightBtns: [
        <Button type="primary">添加</Button>,
        <Button>导出全部</Button>,
      ]
    }
  }

  render() {
    return super.render({
      filterBelow: <Alert type="info" message={'你已经勾选了：' + this.state.selectedRows.length} style={{ marginBottom: '10px' }} />,
      footer: <>
        <hr />
        <p style={{ textAlign: 'center' }}>表格底部</p>
      </>
    })
  }

  private export = () => {
    UdModal.open({
      title: '导出',
      content: <div>已选择{this.state.selectedRowKeys.length}项，是否确认导出?</div>,
      onOk: (values) => {
      }
    })
  }

}

// 如果是通过 react-router 加载的此组件，无须用 withRouter 包一次。
export default withRouter(Demo)
